<template>
    <div class="search-form">
        <!-- 头部tab切换 -->
        <el-row type="flex" class="search-tab">
            <span
                v-for="(item, index) in tabs"
                :key="index"
                @click="handleSearchTab(index)"
                :class="{ active: index === currentTab }"
            >
                <i :class="item.icon"></i>{{ item.name }}
            </span>
        </el-row>

        <!-- 以下是搜索表单部分 -->
        <el-form class="search-form-content" ref="form" label-width="80px">
            <el-form-item label="出发城市">
                <!-- fetch-suggestions 返回输入建议的方法 -->
                <!-- select 点击选中建议项时触发 -->
                <el-autocomplete
                    v-model="form.departCity"
                    :fetch-suggestions="queryDepartSearch"
                    placeholder="请搜索出发城市"
                    @select="handleDepartSelect"
                    class="el-autocomplete"
                    :trigger-on-focus="false"
                    :highlight-first-item="true"
                ></el-autocomplete>
            </el-form-item>

            <el-form-item label="到达城市">
                <el-autocomplete
                    v-model="form.destCity"
                    :fetch-suggestions="queryDestSearch"
                    placeholder="请搜索到达城市"
                    @select="handleDestSelect"
                    class="el-autocomplete"
                    :trigger-on-focus="false"
                    :highlight-first-item="true"
                ></el-autocomplete>
            </el-form-item>

            <el-form-item label="出发时间">
                <!-- change 用户确认选择日期时触发 -->
                <el-date-picker
                    v-model="form.departDate"
                    type="date"
                    placeholder="请选择日期"
                    style="width: 100%"
                    @change="handleDate"
                    :picker-options="{
                        disabledDate
                    }"
                >
                </el-date-picker>
            </el-form-item>

            <el-form-item label="">
                <el-button
                    style="width: 100%"
                    type="primary"
                    icon="el-icon-search"
                    @click="handleSubmit"
                >
                    搜索
                </el-button>
            </el-form-item>

            <div class="reverse">
                <span @click="handleReverse">换</span>
            </div>
        </el-form>
    </div>
</template>

<script>
    import {airsCity} from './air'
    import moment from 'moment'
    export default {
        data() {
            return {
                tabs: [
                    { icon: "iconfont icondancheng", name: "单程" },
                    { icon: "iconfont iconshuangxiang", name: "往返" },
                ],
                currentTab: 0,
                form: {
                    departCity: "",
                    departCode: "",
                    destCity: "",
                    destCode: "",
                    departDate: "",
                },
            };
        },
        methods: {
            disabledDate(time) {
                // 这里返回 true 说明disabled 不可选
                return time.getTime() < Date.now() - 24*60*60*1000 
            },
            async getCitiesList(name) {
              const res = await airsCity(name)
              if (res) {
                let cities = res.data.data.filter(city=>{
                  return city.sort
                }).map(city=>{
                  return {
                    ...city,
                    value: city.name.replace('市', '')
                  }
                })
                // 上面的链式调用其实就是在 cities 里面过滤了数据
                // 相当于下面的写法
                // cities = cities.filter(city=>{
                //   return city.sort
                // })
                // 合并搜索城市后的优化, 如果搜索出来的城市长度 等于 0 显示没有城市
                return cities.length == 0 ? [{value: '没有搜索的城市'}] : cities
              }
            },
            handleSearchTab(index) {
                if (index == 1) {
                  this.$message('暂时只支持单程机票搜索')
                }
                // this.currentTab = index;
            },
            async queryDepartSearch(str, showList) {
              const cities = await this.getCitiesList(str)
              // 默认将第一项的代码放入 form 表单当中
              // 不用担心用户之后的操作,
              // 如果用户不选择, 默认就有 code 
              // 如果用户选择一个城市, 
              // 会后续触发 select 事件
              // 用户选择的数据会覆盖掉默认数据
              this.form.departCode = cities[0].sort
              showList(cities)
            },
            async queryDestSearch(str, showList) {
              const cities = await this.getCitiesList(str)
              this.form.destCode = cities[0].sort
              showList(cities)
            },

            handleDepartSelect(item) {
              // 每当选中一个城市, 需要把当前代码添加到 form 当中
              // 虽然用户看不见, 但是我们发请求要用
              this.form.departCode = item.sort
            },
            handleDestSelect(item) {
              this.form.destCode = item.sort
            },

            handleDate(date) {
              // console.log(date);
              // 这里默认拿到日期对象,
              // 既可以自己手动用原生办法转成需要的格式,
              // 也可以第三方组件 moment.js
              // console.log(date.getFullYear());
              // console.log(moment(date).format('YYYY-MM-DD'));
              this.form.departDate = moment(date).format('YYYY-MM-DD')
            },

            handleReverse() {
              // 要将出发城市和出发代码跟到达城市到达代码互换
              const oldDepartCode = this.form.departCode
              const oldDepartCity = this.form.departCity

              this.form.departCode = this.form.destCode
              this.form.destCode = oldDepartCode

              this.form.departCity = this.form.destCity
              this.form.destCity = oldDepartCity
            },

            handleSubmit() {
              console.log(this.form);
              //   跳转到所搜结果之前, 需要先进行历史数据储存
              this.$store.commit('historystore/addHistory', this.form)
              this.$router.push({
                  path: '/air/flights',
                  query: this.form
              })
            },
        },
    };
</script>

<style scoped lang="less">
    .search-form {
        border: 1px #ddd solid;
        border-top: none;
        width: 360px;
        height: 350px;
        box-sizing: border-box;
    }

    .search-tab {
        span {
            display: block;
            flex: 1;
            text-align: center;
            height: 48px;
            line-height: 42px;
            box-sizing: border-box;
            border-top: 3px #eee solid;
            background: #eee;
        }

        .active {
            border-top-color: orange;
            background: #fff;
        }

        i {
            margin-right: 5px;
            font-size: 18px;

            &:first-child {
                font-size: 16px;
            }
        }
    }

    .search-form-content {
        padding: 15px 50px 15px 15px;
        position: relative;

        .el-autocomplete {
            width: 100%;
        }
    }

    .reverse {
        position: absolute;
        top: 35px;
        right: 15px;

        &:after,
        &:before {
            display: block;
            content: "";
            position: absolute;
            left: -35px;
            width: 25px;
            height: 1px;
            background: #ccc;
        }

        &:after {
            top: 0;
        }

        &:before {
            top: 60px;
        }

        span {
            display: block;
            position: absolute;
            top: 20px;
            right: 0;
            font-size: 12px;
            background: #999;
            color: #fff;
            width: 20px;
            height: 20px;
            line-height: 18px;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;

            &:after,
            &:before {
                display: block;
                content: "";
                position: absolute;
                left: 10px;
                width: 1px;
                height: 20px;
                background: #ccc;
            }

            &:after {
                top: -20px;
            }

            &:before {
                top: 20px;
            }
        }
    }
</style>